<template>
    <div :style="carStyle" @click="gotoUrl(obj)">
        <div v-if="obj.cardImgData.url != '' || obj.libraryUrl != ''" class="imgshowbox">
            <img v-if="obj.libraryUrl && obj.libraryUrl != ''" :src="obj.libraryUrl" alt="" :style="imgStyle" />
            <img v-else :src="obj.cardImgData.url" alt="" :style="imgStyle" />
        </div>
        <div class="defaultText" v-else>请选择图片资源</div>
    </div>
</template>

<script>
export default {
    Name: "CardImg",
    props: {
        obj: Object,
        isEdit: {
            type: Boolean,
            default: false,
        },
        gotoUrl: {
            type: Function,
            default: function () { },
        },
    },
    data() {
        return {
            carStyle: {},
            imgData: "",
            imgStyle: {},
        }
    },
    mounted() {
        this.setStyle();
        // alert(this.obj.cardImgData.url)
        // if (this.obj.cardImgData.url) {
        //     // this.image2Base64(this.obj.cardImgData.url);
        //     this.getDetial();
        // }
    },
    methods: {
        // getDetial() {
        //     var id = this.obj.cardImgData.url.split('=')[1];
        //     var self = this;
        //     axios({
        //         method: "GET",
        //         url: process.env.VUE_APP_FILE_GETPATH,
        //         params: { fileid: id },
        //         timeout: 10000,
        //     }).then((res) => {
        //         if (res.data.code == 0) {
        //             if (res.data.data.path.indexOf('.gif') > 0) {
        //                 self.imgData = res.data.data.path;
        //             } else {
        //                 self.image2Base64(self.obj.cardImgData.url);
        //             }
        //         }
        //     })
        // },
        // 图片转base64 生成封面图
        // image2Base64(url) {
        //     var self = this;
        //     var canvas = document.createElement('canvas'),
        //         ctx = canvas.getContext('2d'),
        //         img = new Image();
        //     img.crossOrigin = 'Anonymous';
        //     img.src = url;

        //     img.onload = function () {
        //         canvas.height = img.height;
        //         canvas.width = img.width;
        //         ctx.drawImage(img, 0, 0);
        //         // var dataURL = canvas.toDataURL('image/jpeg');

        //         self.imgData = canvas.toDataURL("image/png");
        //     };
        // },
        setStyle() {
            var style = this.obj.style;

            var backgroundColor = "";
            var backgroundImage = "";
            // 背景颜色
            if (style.backgroundImage.length) {
                backgroundImage = `url(${style.backgroundImage}`;
            } else if (style.backgroundColor.length > 0) {
                backgroundColor = style.backgroundColor;
            } else {
                backgroundColor = "";
            }

            var boxShadow = "";
            if (style.boxShadow) {
                boxShadow = `${style.boxShadow.h}px ${style.boxShadow.v}px ${style.boxShadow.blur}px ${style.boxShadow.spreed}px ${style.boxShadow.color}`
            }

            this.carStyle = {
                boxShadow,
                width: "100%",
                height: "100%",
                display: "flex",
                backgroundSize: "100% 100%",
                borderStyle: "solid",
                backgroundImage,
                backgroundColor,
                color: style.color,
                fontSize: style.fontSize + "px",
                justifyContent: style.justifyContent,
                alignItems: style.alignItems,
                borderColor: style.borderColor,
                borderWidth: style.borderWidth + "px",
                borderRadius: style.borderRadius + "px",
                fontWeight: style.fontWeight,
                fontStyle: style.fontStyle,
            }

            if (this.isEdit == false && this.obj.contactType > 0) {
                this.carStyle.cursor = "pointer";
            }

            // 图片填充
            if (this.obj.fillType == 1) {
                this.imgStyle = {
                    width: "auto",
                    height: "auto",
                    maxWidth: "100%",
                    maxHeight: "100%",
                }
            } else {
                this.imgStyle = {
                    width: "100%",
                    height: "100%"
                }
            }

            if (this.obj.opacity != undefined) {
                this.imgStyle.opacity = this.obj.opacity
            } else {
                this.obj.opacity = 1;
            }
        }
    },
    watch: {
        obj: {
            deep: true,  // 深度监听
            handler(newVal, oldVal) {
                // console.log(newVal, oldVal)
                this.setStyle();
            }
        }
    },
}
</script>

<style scoped>
.imgshowbox{
    width:100%;height:100%;text-align: center;display:flex;align-items: center; justify-content: center;
}
.cardimg {
    position: absolute;
    top: 0;
    left: 0;
}

.defaultText {
    width: 100%;
    height: 100%;
    justify-content: center;
    display: flex;
    align-items: center;
}
</style>